<!-- 旅游攻略 左侧排行榜 导航 -->
<template>
  <div class="box">
      
    <template  v-for="items in rankingNav">
      <el-popover placement="bottom" width="400" trigger="click" :key="items.id">
        <ul class="dataList">
          <li
            v-for="(item,i) in items.placeList"
            :key="i"
            class="dataItem"
          >{{item.place}}({{item.num}})</li>
        </ul>

        <el-button slot="reference">
          {{items.name}}
          <i class="el-icon-caret-bottom"></i>
        </el-button>
      </el-popover>
    </template>

  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },

  components: {},

  computed: {
    ...mapState(["rankingNav"])
  },
  mounted() {
    this.$store.dispatch("reqRankingNav");
  },
  methods: {}
};
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
.box {
  height: 46px;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  display: flex;
  padding: 8px 0 0 0;
  box-sizing: border-box;
}

.dataList {
  display: flex;
  flex-wrap: wrap;
  width: 450px;
  padding: 20px 20px 5px;
  box-sizing: border-box;

  .dataItem {
    margin-right: 25px;
    margin-bottom: 15px;

    &:hover {
      cursor: pointer;
      color: #ff9d00;
      text-decoration: underline;
    }
  }
}

>>>.el-button {
  background-color: transparent;
  border: none;
  font-size: 14px;
  width: 55px;
  padding: 8px 0;
  border-radius: 0;

  &:hover {
    color: #000;
  }

  &:focus {
    color: #ff9d00;
    border-bottom: 3px solid #ff9d00;
  }
}
</style>